<template>
  <div class="container">
    <el-row type="flex" justify="center">
      <el-col :span="23">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>试题录入</span>
          </div>
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- 学科 -->
              <el-form-item label="学科" prop="region">
                <el-select v-model="ruleForm.region" placeholder="请选择学科">
                  <el-option
                    v-for="v in subjectList"
                    :key="v.value"
                    :label="v.label"
                    :value="v.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 目录 -->
              <el-form-item label="目录" prop="regionMl">
                <el-select
                  v-model="ruleForm.regionMl"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in regionMlList"
                    :key="v.value"
                    :label="v.label"
                    :value="v.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <!-- 企业 -->
              <el-form-item label="企业" prop="regionQy">
                <el-select
                  v-model="ruleForm.regionQy"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in QyList"
                    :key="v.id"
                    :label="v.shortName"
                    :value="v.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 城市 -->
              <el-form-item label="城市" prop="regionCity">
                <!-- 城市：市 -->
                <el-select
                  v-model="ruleForm.regionShi"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in regionShiList"
                    :key="v"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
                <!-- 城市：县 -->
                <el-select
                  v-model="ruleForm.regionXian"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in regionXianList"
                    :key="v"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 方向 -->
              <el-form-item label="方向" prop="regionQy">
                <el-select
                  v-model="ruleForm.direction"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in directionList"
                    :key="v"
                    :label="v"
                    :value="v"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 题型 -->
              <el-form-item label="题型" prop="resource">
                <el-radio-group v-model="ruleForm.resource1">
                  <el-radio label="单选"></el-radio>
                  <el-radio label="多选"></el-radio>
                  <el-radio label="简单"></el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 难度 -->
              <el-form-item label="难度" prop="resource2">
                <el-radio-group v-model="ruleForm.resource2">
                  <el-radio label="简单"></el-radio>
                  <el-radio label="一般"></el-radio>
                  <el-radio label="困难"></el-radio>
                </el-radio-group>
              </el-form-item>
              <!-- 题干 -->
              <el-form-item label="题干" prop="" style="width: 80%">
                <div class="MyEdit">
                  <div c-model ref="editor" class="myEdit"></div>
                </div>
              </el-form-item>
              <!-- 选项 -->
              <el-form-item
                label="选项"
                prop="resource2"
                style="margin-top: 80px"
              >
                <el-radio-group v-model="ruleForm. options[0].isRight">
                  <!-- A选择 -->
                  <el-radio label="A:"></el-radio>
                  <el-input v-model="ruleForm.name"></el-input>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <!-- B选择 -->
                  <div style="margin-top: 15px"></div>
                  <el-radio label="B:"></el-radio>
                  <el-input v-model="ruleForm.name"></el-input>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <!-- C选择 -->
                  <div style="margin-top: 15px"></div>
                  <el-radio label="C:"></el-radio>
                  <el-input v-model="ruleForm.name"></el-input>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                  <!-- D选择 -->
                  <div style="margin-top: 15px"></div>
                  <el-radio label="D:"></el-radio>
                  <el-input v-model="ruleForm.name"></el-input>
                  <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple
                  >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                      将文件拖到此处，或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                      只能上传jpg/png文件，且不超过500kb
                    </div>
                  </el-upload>
                </el-radio-group>
              </el-form-item>
              <!-- 解析 -->
              <el-form-item label="解析视频" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  style="width: 400px"
                ></el-input>
              </el-form-item>
              <!-- 答案解析 -->
              <el-form-item label="答案解析" prop="answer" style="width: 80%">
                <div class="MyEdit">
                  <div ref="editorr" class="myEdit"></div>
                </div>
              </el-form-item>
              <!-- 题目备注 -->
              <el-form-item
                label="题目备注"
                prop="desc"
                style="margin-top: 70px"
              >
                <el-input
                  type="textarea"
                  v-model="ruleForm.desc"
                  style="width: 500px"
                ></el-input>
              </el-form-item>
              <!-- 试题标签 -->
              <el-form-item label="试题标签" prop="regionShiTi" >
                <el-select
                multiple
                  v-model="ruleForm.regionShiTi"
                  placeholder="请选择活动区域"
                >
                  <el-option
                    v-for="v in regionShiTiList"
                    :key="v.value"
                    :label="v.label"
                    :value="v.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 提交 -->
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >确认提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simple2 } from '@/api/hmmm/directorys.js'
import { list } from '@/api/hmmm//companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { simple as simple3 } from '@/api/hmmm/tags.js'
import { add } from '@/api/hmmm/questions.js'
import Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  data () {
    return {

      // ruleForm数据
      ruleForm: {
        region: '',
        regionQy: '',
        regionShi: '',
        regionXian: '',
        direction: '',
        regionMl: '',
        resource1: '单选',
        resource2: '简单',
        desc: '',
        regionShiTi: '',
        Tigan: '',
        answer: '',
        options: [
          {
            isRight: false,
            code: 'A',
            title: 'A',
            img: ''
          }
        ]
      },
      // 数组列表
      subjectList: [],
      QyList: [],
      regionShiList: [],
      regionXianList: [],
      directionList: [],
      regionMlList: [],
      regionShiTiList: [],
      // 规则
      rules: {
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        Tigan: [
          { min: 3, max: 5, message: '请选择活动区域', trigger: 'blur' }
        ],
        regionQy: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        regionShi: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        regionXian: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        direction: [],
        regionMl: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        answer: [
          { max: 50, validator: this.checkRichText, trigger: 'blur' }
        ]

      }
    }
  },
  watch: {
    async 'ruleForm.regionShi' () {
      console.log('县已被监听')
      this.ruleForm.regionXian = ''
      const res = await citys(this.ruleForm.regionShi)
      console.log(res)
      this.regionXianList = res
    },
    async 'ruleForm.region' () {
      console.log('学科已被监听')
      const res = await simple2({ subjectID: this.ruleForm.region })
      console.log(res.data)
      this.regionMlList = res.data
      console.log(' 回显试题标签')
      const ress = await simple3({ subjectID: this.ruleForm.region })
      console.log(ress)
      this.regionShiTiList = ress.data
    }
  },

  async created () {
    // 学科列表
    const res = await simple({})
    console.log(res.data)
    this.subjectList = res.data

    // 企业列表
    const res2 = await list({})
    console.log(res2.data.items)
    this.QyList = res2.data.items

    const res3 = await provinces({})
    console.log(res3)
    this.regionShiList = res3

    this.directionList = direction
    console.log(this.directionList)
  },
  mounted () {
    this.quill = new Quill(this.$refs.editor, {
      theme: 'snow' // 指定主题
    })
    this.quilll = new Quill(this.$refs.editorr, {
      theme: 'snow' // 指定主题
    })
    console.log(this.ruleForm)
  },
  methods: {

    submitForm (formName) {
      const html = this.quill.root.innerHTML

      this.ruleForm.Tigan = html
      console.log(this.ruleForm.Tigan)
      const html2 = this.quilll.root.innerHTML
      console.log(html2)
      this.ruleForm.answer = html2
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // console.log(this.ruleForm)
          const params = {
            subjectID: this.ruleForm.region,
            catalogID: this.ruleForm.regionMl,
            enterpriseID: this.ruleForm.regionQy,
            province: this.ruleForm.regionShi,
            city: this.ruleForm.regionXian,
            direction: this.ruleForm.direction,
            questionType: this.ruleForm.resource1,
            difficulty: this.ruleForm.resource2,
            question: this.ruleForm.Tigan,
            answer: this.ruleForm.answer,
            options: []
          }
          console.log(params)
          const res = await add(params)
          console.log(res)
          this.$router.push('/questions/list')
        } else {
          console.log('error submit!!')

          return false
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.MyEdit {
  width: 100%;
  height: 300px;

  .myEdit {
    width: 100%;
    height: 100%; /* 设置编辑器的最小高度 */
    border: 1px solid #ccc; /* 添加边框 */
    border-radius: 4px; /* 添加圆角 */
  }
}
</style>
